<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="846px"
      :title="model.text"
      wrapClassName="tenant-modal-container"
      @cancel="closeModal()"
    >
      <div class="tenant-modal-body" v-loading="formLoading">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :hideRequiredMark="model.text == '查看' ? true : false"
        >
          <a-row>
            <a-col :span="12" v-if="model.superiorML">
              <!-- 上级目录 -->
              <a-form-model-item label="上级目录">
                <a-input v-model="model.superiorML" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- 类型 -->
              <a-form-model-item
                ref="menuTypeValue"
                label="类型"
                prop="menuTypeValue"
              >
                <a-select
                  v-model="form.menuTypeValue"
                  placeholder="请选择类型"
                  :loading="menuTypeLoading"
                  disabled
                >
                  <a-select-option
                    :value="item.dicValue"
                    v-for="(item, index) in menuTypeSource"
                    :key="index"
                  >
                    {{ item.dicDesc }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- 编码 -->
              <a-form-model-item ref="menuCode" label="编码" prop="menuCode">
                <a-input
                  v-model="form.menuCode"
                  placeholder="请输入编码"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- 排序 -->
              <a-form-model-item ref="sort" label="排序" prop="sort">
                <a-input
                  v-model="form.sort"
                  type="number"
                  placeholder="请输入排序"
                  :disabled="model.text == '查看' ? true : false"
                  :maxLength="11"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <!-- 名称 -->
              <a-form-model-item ref="menuName" label="名称" prop="menuName">
                <a-input
                  v-model.trim="form.menuName"
                  placeholder="请输入菜单名称"
                  :maxLength="50"
                  :disabled="model.text == '查看' ? true : false"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- 是否外链 -->
              <a-form-model-item ref="isFrame" label="是否外链" prop="isFrame">
                <a-radio-group
                  v-model="form.isFrame"
                  :disabled="model.text == '查看' ? true : false"
                >
                  <a-radio value="1"> 是 </a-radio>
                  <a-radio value="0"> 否 </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- 菜单类型 -->
              <a-form-model-item
                ref="isSystemMenu"
                label="菜单类型"
                prop="isSystemMenu"
              >
                <a-select
                  v-model="form.isSystemMenu"
                  placeholder="请选择菜单类型"
                  :disabled="model.text == '查看' ? true : false"
                >
                  <a-select-option value="0"> 业务菜单 </a-select-option>
                  <a-select-option value="1"> 配置中心</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <!-- pc路由地址 -->
              <a-form-model-item label="pc路由地址" prop="path">
                <a-input
                  v-model.trim="form.path"
                  placeholder="请输入pc路由地址"
                  :disabled="model.text == '查看' ? true : false"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <!-- app路由地址 -->
              <a-form-model-item label="app路由地址" prop="appPath">
                <a-input
                  v-model.trim="form.appPath"
                  placeholder="请输入app路由地址"
                  :disabled="model.text == '查看' ? true : false"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- 应用标识 -->
              <a-form-model-item label="应用标识" prop="activeRule">
                <a-input
                  v-model.trim="form.activeRule"
                  placeholder="请输入应用标识"
                  :disabled="model.text == '查看' ? true : false"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- 打开方式 -->
              <a-form-model-item label="打开方式">
                <a-select v-model="form.openType" disabled>
                  <a-select-option
                    :value="item.key"
                    v-for="(item, index) in openTypeSource"
                    :key="index"
                  >
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <!-- pc菜单图标: -->
              <!-- <a-form-model-item label="pc菜单图标">
                <a-input
                  v-model.trim="form.pcModulPath"
                  :placeholder="model.text == '查看' ? '' : '请输入pc菜单图标'"
                  :disabled="model.text == '查看' ? true : false"
                />
              </a-form-model-item> -->
            </a-col>
            <a-col :span="24">
              <!-- app菜单图标 -->
              <a-form-model-item label="app菜单图标">
                <a-input
                  v-model.trim="form.appModulPath"
                  :placeholder="model.text == '查看' ? '' : '请输入app菜单图标'"
                  :disabled="model.text == '查看' ? true : false"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- pc是否展示 -->
              <a-form-model-item ref="pcShow" label="pc是否展示" prop="pcShow">
                <a-radio-group
                  v-model="form.pcShow"
                  :disabled="model.text == '查看' ? true : false"
                >
                  <a-radio value="0"> 是 </a-radio>
                  <a-radio value="1"> 否 </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- app是否展示 -->
              <a-form-model-item
                ref="appShow"
                label="app是否展示"
                prop="appShow"
              >
                <a-radio-group
                  v-model="form.appShow"
                  :disabled="model.text == '查看' ? true : false"
                >
                  <a-radio value="0"> 是 </a-radio>
                  <a-radio value="1"> 否 </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="form-footer flex">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button
          type="primary"
          :loading="loading"
          @click="submitForm()"
          v-if="model.text != '查看'"
        >
          提交
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  getTenantPermissionDetails,
  getTenantUpdate,
} from "@/api/user-center/tenantManage.js";
import { getDictList } from "@/api/user-center/organizationManage.js";
import { notificationTip } from "@/utils";
export default {
  name: "editChildrenNodeModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getMenuTypeList();
          if (this.model.id) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        //类型
        menuTypeValue: undefined,
        //目录编码
        menuCode: "",
        //目录名称
        menuName: "",
        //排序
        sort: "0",
        //是否外链
        isFrame: "0",
        //菜单类型
        isSystemMenu: undefined,
        //pc路由地址
        path: "",
        //app路由地址
        appPath: "",
        //应用标识
        activeRule: "",
        //打开方式
        openType: undefined,
        //pc菜单图标
        pcModulPath: "",
        //app菜单图标
        appModulPath: "",
        //pc是否展示
        pcShow: "0",
        //app是否展示
        appShow: "0",
      },
      formLoading: false,
      rules: {
        menuName: [{ required: true, message: "请输入名称" }],
        sort: [{ required: true, message: "请输入排序" }],
        isFrame: [{ required: true, message: "请选择是否外链" }],
        isSystemMenu: [{ required: true, message: "请选择菜单类型" }],
        pcShow: [{ required: true, message: "请选择pc是否展示" }],
        appShow: [{ required: true, message: "请选择app是否展示" }],
        path: [{ required: true, message: "请输入pc路由地址" }],
        appPath: [{ required: true, message: "请输入app路由地址" }],
        activeRule: [{ required: true, message: "请输入应用标识" }],
      },
      //打开方式
      openTypeSource: [
        { key: "blank", value: "新窗口" },
        { key: "inner", value: "当前窗口" },
      ],
      //类型
      menuTypeLoading: false,
      menuTypeSource: [],
    };
  },
  mounted() {},
  methods: {
    //查询菜单类型
    getMenuTypeList() {
      this.menuTypeLoading = true;
      getDictList({ dictKey: "menuType" })
        .then((res) => {
          let { data } = res;
          this.menuTypeSource = data.result || [];
        })
        .catch((_) => {
          this.menuTypeSource = [];
        })
        .finally((_) => {
          this.menuTypeLoading = false;
        });
    },
    //详情
    getDetail() {
      this.formLoading = true;
      let { id } = this.model;
      getTenantPermissionDetails(id)
        .then((res) => {
          let { data } = res;
          this.form = {
            //类型
            menuTypeValue: Number(data.result.menuTypeValue),
            //目录编码
            menuCode: data.result.menuCode,
            //目录名称
            menuName: data.result.menuName,
            //排序
            sort: data.result.sort,
            //是否外链
            isFrame: data.result.isFrame,
            //菜单类型
            isSystemMenu: data.result.isSystemMenu,
            //pc路由地址
            path: data.result.path,
            //app路由地址
            appPath: data.result.appPath,
            //应用标识
            activeRule: data.result.activeRule,
            //打开方式
            openType: data.result.openType,
            //pc菜单图标
            pcModulPath: data.result.pcModulPath,
            //app菜单图标
            appModulPath: data.result.appModulPath,
            //pc是否展示
            pcShow: data?.result?.pcShow.toString() || "",
            //app是否展示
            appShow: data?.result?.appShow.toString() || "",
          };
        })
        .catch((_) => {})
        .finally((_) => {
          this.formLoading = false;
        });
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //提交
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          let { form } = this;
          let { id, text, parentId } = this.model;
          let { tenantCode } = this.$route.query;
          let formJson = {
            //类型
            menuTypeValue: form.menuTypeValue,
            //目录编码
            menuCode: form.menuCode,
            //目录名称
            menuName: form.menuName,
            //排序
            sort: form.sort,
            //是否外链
            isFrame: form.isFrame,
            //菜单类型
            isSystemMenu: form.isSystemMenu ? form.isSystemMenu : "",
            //pc路由地址
            path: form.path,
            //app路由地址
            appPath: form.appPath,
            //应用标识
            activeRule: form.activeRule,
            //打开方式
            openType: form.openType ? form.openType : "",
            //pc菜单图标
            pcModulPath: form.pcModulPath,
            //app菜单图标
            appModulPath: form.appModulPath,
            //pc是否展示
            pcShow: form.pcShow,
            //app是否展示
            appShow: form.appShow,
            tenantCode,
            parentId,
            id,
          };
          getTenantUpdate(formJson)
            .then((res) => {
              notificationTip("success", text + "成功！");
              this.closeModal();
              this.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.loading = false;
            });
        }
      });
    },

    //重置表单
    resetForm() {
      this.form = {
        //类型
        menuTypeValue: undefined,
        //目录编码
        menuCode: "",
        //目录名称
        menuName: "",
        //排序
        sort: "0",
        //是否外链
        isFrame: "0",
        //菜单类型
        isSystemMenu: undefined,
        //pc路由地址
        path: "",
        //app路由地址
        appPath: "",
        //应用标识
        activeRule: "",
        //打开方式
        openType: undefined,
        //pc菜单图标
        pcModulPath: "",
        //app菜单图标
        appModulPath: "",
        //pc是否展示
        pcShow: "0",
        //app是否展示
        appShow: "0",
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.tenant-modal-container {
  .ant-modal-body {
    padding: 18px 60px 18px 40px;
    .tenant-modal-body {
      .ant-form-item {
        .flex();
        .ant-form-item-label {
          flex-shrink: 0;
          width: 110px;
        }
        .ant-form-item-control-wrapper {
          flex: 1;
        }
        .permision-menu-container {
          width: 414px;
          height: 278px;
          background: #ffffff;
          border: 1px solid #d4d7d8;
          border-radius: 4px;
          .custom-scrollbar();
          &.error {
            border-color: red;
          }
          .ant-tree {
            li {
              width: 100%;
              .ant-tree-node-content-wrapper {
                width: calc(100% - 60px);
              }
            }
          }
        }
      }
    }
    .form-footer {
      justify-content: center;
    }
  }
}
</style>
